<template>
  <el-card class="good-container">
    <template #header>
      <div class="header">
        <el-button type="primary" :icon="Plus" @click="handleAdd">新增spu</el-button>
      </div>
    </template>
    <el-table ref="tableRef" :load="state.loading" :data="state.tableData" tooltip-effect="dark" style="width: 100%">
      <el-table-column type="selection" width="50" fixed="left"></el-table-column>
      <el-table-column prop="spu_id" label="spu编号">
      </el-table-column>
      <el-table-column prop="name" label="名称">
      </el-table-column>
      <el-table-column prop="description" label="描述">
      </el-table-column>
      <el-table-column prop="min_price" label="最低价格">
      </el-table-column>
      <el-table-column label="图片">
        <template #default="scope">
          <img :src="scope.row.image_url" style="width: 50px; height: 50px;">
        </template>
      </el-table-column>
      <el-table-column prop="status" label="是否上架">
      </el-table-column>
      <el-table-column prop="category_id" label="分类编号">
      </el-table-column>

      <el-table-column label="操作" width="120">
        <template #default="scope">
          <el-button type="primary" @click="handleEditTags(scope.row.spu_id)">标签管理</el-button>
          <a style="cursor: pointer; margin-right: 10px" @click="handleEdit(scope.row.spu_id)">修改</a>
          <a style="cursor: pointer; margin-right: 10px" @click="handleDel(scope.row.spu_id)">删除</a>
        </template>
      </el-table-column>
    </el-table>
    <!--总数超过一页，再展示分页器-->
    <el-pagination background layout="total,prev, pager, next" :total="state.total" :page-size="state.pageSize"
                   :current-page="state.currentPage" @current-change="changePage" />
  </el-card>
  <el-dialog title="修改商品标签" v-model="state.showEditTagsDialog" style="width: 50%;height: 500px;">
    <el-tree ref="menuRef" style="max-width: 600px;" :props="props" :data="state.tags" node-key="tag_id"
             :default-checked-keys="state.hasTags" show-checkbox />
    <el-button @click="changeTags">提交</el-button>
  </el-dialog>
</template>

<script setup>
import { onMounted, reactive, getCurrentInstance, ref } from 'vue'
import axios from '@/utils/axios'
import { ElMessage } from 'element-plus'
import { Plus} from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const app = getCurrentInstance()
const router = useRouter()
const state = reactive({
  loading: false,
  tableData: [], // 数据列表
  total: 0, // 总条数
  currentPage: 1, // 当前页
  pageSize: 10, // 分页大小
  showEditTagsDialog: false,
  tags: [],//所有角色数据
  hasTags: [],//用户已有的角色数据:default-checked-keys="state.hasRoles"默认选中
  spu_id:'',
})

const tableRef = ref();
const menuRef = ref();//定义树形控件的对象

//el-tree中的props
const props = {
  label: 'tag_name',
  children: 'children'
}

onMounted(() => {
  getList();
  axios.get("/tags/list?limit=20").then(res => {
    state.tags= res.records;
  })
})

// 获取列表
const getList = () => {
  state.loading = true//加载的动画图标显示
  axios.get("/spus/list", {
    params: {
      page: state.currentPage,
      limit: state.pageSize,
    }
  }).then(res => {
    state.tableData = res.records;
    state.total = res.total;
  })
}


const handleAdd = () => {
  router.push({ path: '/addSpu' })
}

const handleEdit = (id) => {
  router.push({ path: '/addSpu', query: { id: id }})
}

const handleDel = (id) => {
  axios.get("/spus/del?spuid=" + id).then(res => {
    if (res == 0) {
      ElMessage({
        showClose: true,//是否显示关闭按钮
        message: "删除成功!",//消息窗口中的样式类型
        type: "success",//消息窗口中的样式类型
        duration: 2000,//消息窗口关闭后的回调函数
        onClose: () => {
          location.reload();//刷新本页面
        }
      })
    }
  })
}

const handleEditTags = (id) => {
  state.spu_id = id;
  state.showEditTagsDialog = true;
  axios.get("/spus/getTagsBySpuId?spuid=" + id)
      .then(res => {
        //清空原来选择的数据
        menuRef.value.setCheckedKeys([]);
        state.hasTags = res.map((item) => item.tag_id)
      })
}

const changeTags = () => {
  //得到选中的角色
  state.hasTags = menuRef.value.getCheckedKeys();
  const params = { "spuid": state.spu_id, "tags": state.hasTags }
  axios.post("/spus/changeTags", params).then(res => {
    state.showEditTagsDialogDialog = false;
  })
}

const changePage = (val) => {
  state.currentPage = val
  getList()
}

</script>

<style scoped>
.good-container {
  min-height: 100%;
}
</style>